<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单详情</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{}
        .head{}
        .head li{display: -webkit-box;display: box;padding: 12px;position: relative;}
        .head li .left{width: 70px;height: 70px;background-size: cover;background-position: center;background-repeat: no-repeat;}

        .head li .right{margin-left: 12px;-webkit-box-flex: 1;box-flex: 1;}
        .head li .right p{line-height: 20px;}
        .head li .right .p1{color: #333;font-size: 15px;}
        .head li .right .p2{color: #ffc10c;line-height: 30px;}
        .head li .right .p3{font-size: 12px;color: #888;}

        .order-detail{padding: 0 20px;}
        .order-detail ul{position: relative;padding:12px 0;}
        .order-detail ul li{padding: 0 10px;border-left: 2px solid #d6d6d6;position: relative;}
        .order-detail ul li:before{content: '';width: 12px;height: 12px;border-radius: 12px;
            background-color: #d6d6d6;display: block;position: absolute;left: -7px;top: 7px;}
        .order-detail ul li p{line-height: 30px;font-size: 13px;}

        .talk{padding: 10px;position: relative;display: -webkit-box;display: box;}
        .talk .left{text-align: center;width: 50px;}
        .talk .left .img{width: 50px;height: 50px;background-size: cover;background-position: center;}
        .talk .left span{color: #333;}
        .talk .left p{font-size: 12px;margin-top: 4px;}
        .talk .left p i{font-size: 12px;color: #049cce;}
        .talk .right{box-flex: 1;-webkit-box-flex: 1;margin-left: 15px;}
        .talk .right .c-title{line-height: 24px;color: #333;}
        .talk .right .comment{color: #666;line-height: 20px;}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;line-height: 50px;}
        .footer a{color: #fff;font-size: 18px;text-align: center;display: block;}
        .footer .status1{display: -webkit-box;display: box;}
        .footer .status1 a{width: 50%;-webkit-box-flex: 1;box-flex: 1;}
        .footer .status1 .customer{background-color: #ffc10c;}
        .footer .status1 .evaluate{background-color: #f69802;}
        .footer .status2 a{background-color: #ffc10c;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">订单详情</div>
    </div>
</header>
<div class="content">
    <ul class="head">
        <li>
            <div class="left" style="background-image: url('../img/pic_3.png')"></div>
            <div class="right">
                <p class="p1">100元充值卡</p>
                <p class="p2"><i class="iconfont icon-jifen"></i>1000</p>
                <p class="p3">订单号：62386625557568456</p>
            </div>
        </li>
    </ul>
    <div class="order-detail">
        <ul class="bottom-line">
            <li>
                <p class="p-title">2016-05-16 周二 13:24 兑换</p>
            </li>
            <li>
                <p class="p-title">2016-05-17 周三 14:30 发货</p>
                <p class="express">快递类型：申通快递</p>
                <p class="express-num">快递单号：20150514247</p>
            </li>
            <li>
                <p class="p-title">2016-05-17 周三 14:30 收货</p>
            </li>
        </ul>
    </div>
    <div class="talk">
        <div class="left">
            <div class="img" style="background-image: url('../img/pic_lessor.png')"></div>
            <p>
                <span class="name">小明</span>
                <span class="sex"><i class="iconfont icon-women"></i></span>
            </p>
        </div>
        <div class="right">
            <p class="c-title">评价</p>
            <p class="comment">评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容</p>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="footer-fixed">
        <!--完成的订单-->
        <div class="status1">
            <a href="" class="customer">退换货（客服）</a>
            <a href="../html/order_comment.html" class="evaluate">评价</a>
        </div>
        <!--发货中的订单-->
        <!--<div class="status2">-->
            <!--<a href="" class="cancel">取消订单</a>-->
        <!--</div>-->
    </div>
</footer>
</body>
</html>